<template>
  <div class="tmpl">
    <!-- 头部标题行信息 -->
    <div class="page-title">
      <span>仪表盘</span><span class="page-title-en">DASHBOARD</span>
    </div>
    <el-row :gutter="30" class="dashboard-info">
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <div class="grid-content bg-blue">
          <i class="el-icon-upload"></i>
          <div class="count">111</div>
          <div class="title">DOWNLOAD</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <div class="grid-content bg-brown">
          <i class="el-icon-info"></i>
          <div class="count">222</div>
          <div class="title">PURCHASE</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <div class="grid-content bg-black">
          <i class="el-icon-tickets"></i>
          <div class="count">333</div>
          <div class="title">ORDER</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <div class="grid-content bg-green">
          <i class="el-icon-sold-out"></i>
          <div class="count">44</div>
          <div class="title">STOCK</div>
        </div>
      </el-col>
    </el-row>
    <div class="clearfix"></div>
    <el-row :gutter="30" class="dashboard-charts">
      <!-- 柱状图 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="14" >
        <div class="grid-content bg-white" style="padding: 0 20px;" ref="divWidth">
          <ve-histogram :data="barData" :settings="barSettings" :extend="barExtend" ref="barChart"></ve-histogram>
        </div>
      </el-col>
      <!-- 环形图 -->
      <el-col :xs="24" :sm="24" :md="10" :lg="10">
        <div class="grid-content bg-white">
          <ve-ring :data="ringData" :settings="ringSettings" :extend="ringExtend" ref="ringChart"></ve-ring>
        </div>
      </el-col>

    </el-row>
    <div class="clearfix"></div>
    <span v-if="dateShow">{{date | convertTime('H:mm:ss')}}</span>
    <el-row class="dashboard-tables bg-white">
      <el-col :span="24">
        <div class="grid-table">
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            stripe
            tooltip-effect="dark"
            height="400"
            style="width: 100%;"
            :header-cell-style="{background:'#53A8FF', color:'#fff'}">
            <el-table-column prop="date" label="日期" min-width="50"></el-table-column>
            <el-table-column prop="name" label="姓名" min-width="50"></el-table-column>
            <el-table-column prop="address" label="地址" min-width></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  mounted () {
    this.timer = setInterval(() => {
      this.date = new Date()
    }, 1000)
  },
  data () {
    this.barSettings = {
      axisSite: { right: ['下单率'] },
      yAxisType: ['KMB', 'percent'],
      yAxisName: ['数值', '比率']
    }
    this.ringSettings = {
      radius: [90, 120],
      hoverAnimation: false,
      selectedMode: 'single',
      labelLine: {
        length: 10,
        length2: 5
      }
    }
    return {
      dateShow: false,
      date: new Date(),
      barData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': 'Jan', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': 'Feb', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': 'Mar', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': 'Apr', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': 'May', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': 'Jun', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      ringData: {
        columns: ['来源', '访问用户'],
        rows: [
          { '来源': '百度贴吧', '访问用户': 1393 },
          { '来源': '微博', '访问用户': 3530 },
          { '来源': '抖音', '访问用户': 2923 },
          { '来源': '知乎', '访问用户': 1723 },
          { '来源': '其他', '访问用户': 3792 }
        ]
      },
      barExtend: {
        title: {
          text: 'Visitor Sources',
          left: 20,
          top: 20
        },
        grid: {
          top: 90,
          height: 270,
          width: '100%'
        },
        legend: {
          x: 'center',
          bottom: 5,
          itemGap: 20,
          itemWidth: 5,
          textStyle: {
            fontSize: 12
          }
        }
      },
      ringExtend: {
        title: {
          text: 'Visitor Sources',
          left: 20,
          top: 20
        },
        legend: {
          x: 'center',
          bottom: 5,
          itemGap: 20,
          itemWidth: 5,
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'mousemove',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#3574c8',
          borderWidth: '2',
          extraCssText: 'padding: 10px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)'
        }
      },
      tableData: [
        { date: '2019-02-01', name: '张三', address: '上海市普陀区金沙江路 321 弄' },
        { date: '2019-02-02', name: '李四', address: '上海市长宁区定西路 111 弄' },
        { date: '2019-02-03', name: '王五', address: '上海市浦东新区罗山路 123 弄' },
        { date: '2019-02-04', name: '赵六', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-05', name: '1', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-06', name: '2', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-07', name: '3', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-08', name: '4', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-09', name: '5', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-10', name: '6', address: '上海市普陀区金沙江路 421 弄' },
        { date: '2019-02-11', name: 'Foo', address: '上海市浦东新区张衡路 213 弄' }
      ]
    }
  },
  watch: {
    date (val, oldVal) {
      // 自适应调整图表宽度
      this.$nextTick(() => {
        this.$refs[`barChart`].echarts.resize()
        this.$refs[`ringChart`].echarts.resize()
      })
    }
  }
}
</script>

<style scoped>
  .dashboard-info {
    height: 140px;
    width: 96%;
    margin-left: 2% !important;
  }
  .dashboard-charts {
    margin: 0;
  }
  .el-col {
    margin-bottom: 30px;
  }
  .dashboard-info > .el-col {
    height: 100%;
  }
  .dashboard-charts > .el-col {
    height: 420px;
  }
  .dashboard-tables {
    padding: 30px 30px 0px 30px;
    margin: 0 0 30px 0;
    border-radius: 3px;
  }
  .dashboard-tables > .el-col {
    height: 250px;
  }
  .el-col i {
    font-size: 70px;
    color: #efefef;
    float: left;
    padding: 35px 40px 35px 30px;
  }
  .el-col .count {
    padding: 35px 0 0 0;
    font-size: 35px;
    color: #fff;
  }
  .el-col .title {
    font-size: 13px;
    color: #fff;
  }
  .grid-content {
    height: 100%;
    border-radius: 3px;
  }
  .grid-table {
    padding-bottom: 20px;
  }
  /* 填充el-table右侧滚动条上方表头未被填充的空白 */
  /deep/ .el-table th.gutter {
    background-color: #53A8FF !important;
  }
  .bg-white{
    background: #fff;
  }
  .bg-blue{
    background: #57889c;
  }
  .bg-brown{
    background: #d1b993;
  }
  .bg-black{
    background: #1a2732;
  }
  .bg-green{
    background: #26c281;
  }
</style>
